<template>
  <div>
    <el-row v-for="(medical,index) in list" :key="fieldName+index">
      <div style="display: flex;align-items: center;justify-content: space-between">
        <el-col :span="6">
          <div v-if="index>0 &&!medical.close && !list[index-1].open">
            <el-select v-if="!medical.close" v-model="medical.method" @change="change"
                       placeholder="请选择">
              <el-option
                v-for="item in methods"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="11">
          <el-button v-if="medical.open"
                     style="font-size: 16px;border:1px solid #EEE;padding: 5px"
                     type="text">(
          </el-button>
          <el-button v-if="medical.close"
                     style="font-size: 16px;border:1px solid #EEE;padding: 5px"
                     type="text">)
          </el-button>
          <div>
            <el-select v-if="medical.close===false&&medical.open===false" v-model="medical.value" filterable clearable
                       @change="change" :class="{required: !medical.value}"
                       :placeholder="placeholder">
              <el-option
                v-for="item in filterList"
                :label="item.label"
                :key="fieldName+item.value"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="7" style="padding-left: 10px">
          <el-button style="color: red" v-if="!medical.close&&index!==0&&!medical.open" type="text"
                     @click="deleteMethod(index)">-
          </el-button>
          <el-button type="text" v-if="!medical.open" @click="addSimple(index,medical)"> +</el-button>
          <el-button v-if="!medical.child && !medical.open" type="text" @click="addMethod(index)">(+)
          </el-button>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'condition-filter',
  componentName: 'ConditionFilter',
  props: {
    value: {
      type: [Array, String],
      default() {
        return [{method: 'and', value: '', open: false, close: false}]
      }
    },
    filterList: {
      type: [Array],
      default() {
        return []
      }
    },
    placeholder: {
      type: [String],
      default: '请选择'
    },
    fieldName: {
      type: [String],
      default: 'id'
    },
    prefix: {
      type: [String],
      default: ''
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 0) {
          this.list = newVal
        }
      }
    },
    filterList: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 0) {
          console.log(newVal)
        }
      }
    }
  },
  data() {
    return {
      methods: ['and', 'or', 'not'],
      list: [{method: 'and', value: '', open: false, close: false}]
    }
  },
  created() {
    this.change()
  },
  methods: {
    addSimple(index, medical) {
      this.list.splice(index + 1, 0, {method: 'and', value: '', open: false, close: false, child: medical.child})
      this.change()
    },
    addMethod(index) {
      this.list.splice(index + 1, 0, {method: 'and', value: '', open: true, close: false})
      this.list.splice(index + 2, 0, {method: '', value: '', open: false, close: false, child: true})
      this.list.splice(index + 3, 0, {method: '', value: '', open: false, close: true})
      this.change()
    },
    deleteMethod(index) {
      const i = index
      if (i > 0 && i < this.list.length - 1 && this.list[i - 1].open && this.list[i + 1].close) {
        this.list.splice(i - 1, 3)
      } else {
        this.list.splice(i, 1)
      }
      this.change()
    },
    change() {
      console.log(this.list)
      this.$emit('input', this.list)
      this.$emit('change', this.toSql())
    },
    toSql() {
      let sql = ''
      this.list.forEach(item => {
        if (item.open) {
          sql += item.method + ' ('
        }
        if (item.method === 'not') {
          if (!item.open && !item.close && item.value && item.method) {
            sql += ' and ' + this.prefix + this.fieldName + '<>\'' + item.value + '\' '
          } else if (item.child) {
            sql += ' and ' + this.prefix + this.fieldName + '<>>\'' + item.value + '\' '
          }
        } else {
          if (!item.open && !item.close && item.value && item.method) {
            sql += item.method + ' ' + this.prefix + this.fieldName + '=\'' + item.value + '\' '
          } else if (item.child) {
            sql += item.method + ' ' + this.prefix + this.fieldName + '=\'' + item.value + '\' '
          }
        }

        if (item.close) {
          sql += item.method + ') '
        }
        this.methods.forEach(method => {
          if (sql.indexOf(method) === 0) {
            sql = sql.substring(method.length, sql.length)
          }
        })
      })
      console.log(sql)
      return sql
    }
  }
}
</script>

<style lang="scss" scoped>
.required {
  input {
    background-color: #EB6709;
  }
}
</style>
